<template>
  <div id="app">
    <!-- navbar -->
    <van-nav-bar title="诊断查询" left-arrow fixed />
    <!-- search -->
    <van-search
      style="margin-top:50px"
      v-model="numberValue"
      shape="round"
      placeholder="请输入服务号码、ICCID或IMSI进行查询"
      background="rgb(245, 245, 249)"
      @search="Onsearch"
    />

    <div class="container" v-if="flag">
      <!-- SIM卡信息 -->
      <div class="SIM_container">
        <!--头部  -->
        <div class="header">
          <h4 class="title">SIM卡信息</h4>
          <div class="number">
            <p>14492314236</p>
            <p>停机(非管理停机)</p>
          </div>
        </div>

        <!-- 停机原因 -->
        <div class="downtime">
          <div class="title">停机原因</div>
          <ul class="downtime_info">
            <li>
              <span class="info">客户主动停机</span>
              <van-button round type="info" plain size="small">复机</van-button>
            </li>
            <li>
              <span class="info">窄带网到期停机</span>
              <span class="left">订购窄带网姿费</span>
            </li>
            <li>
              <span class="info">机卡分离</span>
              <van-button round type="info" plain size="small"
                >机卡绑定</van-button
              >
            </li>
            <li>
              <span class="info">M2M芯片业务要求</span>
              <span class="left">-</span>
            </li>
            <li>
              <span class="info">催欠停机</span>
              <span class="left">未启用</span>
            </li>
            <li>
              <span class="info">信控停机</span>
              <span class="left">缴费</span>
            </li>
            <li>
              <span class="info">连带停机</span>
              <span class="left">未启用</span>
            </li>
            <li>
              <span class="info">停机保号</span>
              <span class="left">未启用</span>
            </li>
            <li>
              <span class="info">挂失</span>
              <span class="left">未启用</span>
            </li>
            <li>
              <span class="info">区域限制(位置固定)管理</span>
              <span class="left">外围发起恢复</span>
            </li>
            <li>
              <span class="info">业务管理要求</span>
              <van-button round type="info" plain size="small"
                >前台复机</van-button
              >
            </li>
            <li>
              <span class="info">余额不足</span>
              <span class="left">缴费</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 数据服务状态 -->
      <div class="dataState">
        <div class="header">
          <h3 class="title">数据服务状态</h3>
          <router-link to="/datadetail"><van-icon name="arrow" /></router-link>
        </div>

        <div class="dataState_info">
          <ul>
            <li>
              <span class="left">数据服务</span>
              <span class="right orange">暂停</span>
            </li>
            <li>
              <span class="left">策略限制</span>
              <span class="right green">有效</span>
            </li>
            <li>
              <span class="left">数据商品</span>
              <span class="right green">有效</span>
            </li>
            <li>
              <span class="left">在群状态</span>
              <span class="right green">有效</span>
            </li>
            <li>
              <span class="left">单卡资源</span>
              <span class="right">剩余8000M</span>
            </li>
            <li>
              <span class="left">群组资源</span>
              <span class="right">剩余400M</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 短信服务状态 -->
      <div class="dataState">
        <div class="header">
          <h3 class="title">短信服务状态</h3>
           <router-link to="/smsdetail"><van-icon name="arrow" /></router-link>
        </div>
        <div class="dataState_info">
          <ul>
            <li>
              <span class="left">短信服务</span>
              <span class="right orange">暂停</span>
            </li>
            <li>
              <span class="left">短信商品</span>
              <span class="right green">有效</span>
            </li>
            <li>
              <span class="left">短信端口号</span>
              <span class="right green">987654321等</span>
            </li>
          </ul>
        </div>
      </div>

      <!-- 语音服务状态 -->
      <div class="dataState">
        <div class="header">
          <h3 class="title">语音服务状态</h3>
          <router-link to="/voicedetail"><van-icon name="arrow" /></router-link>
        </div>
        <div class="dataState_info">
          <ul>
            <li>
              <span class="left">语音服务</span>
              <span class="right orange">暂停</span>
            </li>
            <li>
              <span class="left">语音商品</span>
              <span class="right green">有效</span>
            </li>
            <li>
              <span class="left">群组状态</span>
              <span class="right green">有效</span>
            </li>
          </ul>
        </div>
      </div>
    </div>

  <!-- <div>
    <InfoPanelGroup v-for="(item,index) in list" :key="index" :title="item.title">
      <InfoPanelItem v-for="(obj,index) in item.service" 
      :key="index" 
      :label="obj.label" 
      :state="obj.state"
      :identify="obj.identify"
      :startTime="obj.startTime" 
      :endTime="obj.endTime"
      :stateBottom="obj.stateBottom" >
      </InfoPanelItem>
    </InfoPanelGroup>

  </div> -->
  </div>
</template>

<script>
export default {

  name: "HomeVue",
  data() {
    return {
      numberValue:"",
      flag:false
    };
  },
  methods:{
    // 搜索事件
    Onsearch(value){
      console.log(value);
      this.flag = true
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding: 0 12px;
  box-sizing: border-box;
  font-size: 14px;
  margin-bottom:20px ;
  .SIM_container {
    padding: 0 12px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2px);
    .header {
      border-bottom: 1px solid #ccc;
      margin-bottom: 13px;
      .title {
        font-size: 20px;
        line-height: 65px;
        font-weight: 600;
      }
      .number {
        display: flex;
        justify-content: space-between;
        // align-items: center;
        height: 40px;
        :last-child {
          color: #ff4237;
        }
        :first-child {
          color: #727272;
        }
      }
    }
    .downtime {
      .title {
        font-weight: 600;
        margin-bottom: 8px;
      }
      .downtime_info {
        // width: 290px;
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
          height: 45px;

          .info {
            color: #a8a8a8;
          }
          .left {
            width: 130px;
            margin-right: 30px;
          }
          .van-button {
            width: 130px;
            margin-right: 30px;
          }
        }
      }
    }
  }

  .dataState {
    margin-top: 10px;
    background-color: #fff;
    padding: 0 12px;
    border-radius: 8px;
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2px);
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 55px;
    }
    .dataState_info {
      li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 45px;
        .right {
          width: 120px;
        }
        .orange {
          color: #f89b2f;
        }
        .green {
          color: #57c133;
        }
      }
    }
  }
}

.van-search {
  margin: 5px 0;
}
/deep/.van-search__content {
  background-color: #fff;
}
/deep/ .van-nav-bar {
  background-color: #319aff;
  .van-icon {
    color: #fff;
  }
  .van-nav-bar__title {
    color: #fff;
  }
}
</style>